<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管理员登录</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to bottom right, #bdbef8, #b9a3fd);
      }
      .shell {
        width: 640px;
        height: 320px;
        display: flex;
      }
      .box-left {
        background-color: #fff;
        height: 280px;
        top: 20px;
        position: relative;
        width: 50%;
      }
      .box-left h2 {
        font: 900 50px "";
        margin: 30px 20px 20px 40px;
      }
      .box-left span {
        display: block;
        color: #999;
        font-style: 14px;
        margin: 20px 40px;
      }
      .box-right {
        background-color: #474a59;
        box-shadow: 0 0 40px 16px rgba(0, 0, 0, 0.2);
        color: #f1f1f2;
        width: 50%;
      }
      .form {
        margin: 40px;
        position: absolute;
      }
      label {
        color: #c2c2c5;
        display: block;
        font-size: 14px;
        height: 16px;
        margin-top: 20px;
        margin-bottom: 5px;
        position: relative;
      }
      input {
        background: transparent;
        border: 0;
        color: #f2f2f2;
        font-style: 20px;
        height: 30px;
        line-height: 30px;
        width: 100%;
        outline: none !important;
      }
      label::before {
        content: "";
        display: block;
        position: absolute;
        top: 52px;
        width: 100%;
        height: 3px;
        background-image: linear-gradient(to right, #44ffff, #b888ff);
      }
      #login {
        color: #fff;
        margin-top: 40px;
        width: 100px;
        height: 35px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        float: right;
        transition: 0.3s;
      }
      #login:hover {
        letter-spacing: 2px;
        color: #000;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="shell">
      <div class="box-left">
        <h2>管理员<br />登录</h2>
        <span
          >在系统中，管理员只手遮天，不过权力是把双刃剑，希望你能好好把握......</span
        >
      </div>
      <div class="box-right">
        <div class="form">
          <label for="username">用户名</label>
          <input type="username" id="username" />
          <label for="password">密码</label>
          <input type="password" id="password" />
          <input type="button" id="login" value="登录" />
        </div>
      </div>
    </div>
    <script src="plugins/jquery/jquery.min.js"></script>
    <script>
      $("#login").on("click", function () {
        data = {
          username: $("#username").val(),
          password: $("#password").val(),
        };
        console.log(data);
        $.ajax({
          url: "https://douzi.wiki:7000/GROW/api/admin/login",
          type: "Get",
          contentType: "application/json", //必须这样写
          dataType: "json",
          data: data,
          success: function (res) {
            if (res.code == 0) {
              window.location.href = "HotelAdmin-index.html";
            } else {
              alert("您输入用户名或密码有误");
            }
          },
          error: function (res) {},
        });
      });
    </script>
  </body>
</html>
